<template>
  <div>{{ num }}</div>
  <button @click="addNum">测试</button>
</template>
<script setup>
import {
  ref,
  computed,
  watch,
  watchEffect,
  effectScope,
  getCurrentScope,
  onScopeDispose,
} from "vue";

const num = ref(0)
const counter = ref(2);

const addNum = () => {
  counter.value ++
}

// 定义第一个侦听管家
const scope = effectScope();
scope.run(() => {
  const doubled = computed(() => counter.value * 2);
  watch(doubled, () => console.log(doubled.value));

  // watch(doubled, (newVal, oldVal) => {
  //   console.log('doubled的值变了==', newVal, oldVal)
  //   num.value = doubled
  // }, { immediate: true })
  
  watchEffect(() => console.log("Count: ", doubled.value));
});
// scope.stop()  // 调用它，可以取消scope内的侦听。执行这个不会触发onScopeDispose事件

//  定义第二个侦听管家
const scope2 = effectScope();
scope2.run(() => {
  const doubled2 = computed(() => counter.value * 3);
  watch(doubled2, () => console.log(doubled2.value));
  watchEffect(() => console.log("Count: ", doubled2.value));
});
//scope2.stop() // 调用它，可以取消scope2内的侦听。执行这个不会触发onScopeDispose事件

// 获取当前侦听实例
const allScope = getCurrentScope();
// 执行 allScope.stop()时会触发 onScopeDispose 事件
// 当前页面或组件注销时会触发 onScopeDispose 事件
onScopeDispose(() => {
  console.log("已停止所有侦听");
  // to do...
});

// 5秒后停止所有侦听，此时会触发 onScopeDispose 事件
setTimeout(() => {
  allScope.stop();
}, 5000);
</script>
